<template>
    <div class="sub-category">
        <div class="container">
            <!-- 面包屑 -->
            <SubBread />
            <!-- 筛选区 -->
            <SubFilter @filter-change="filterChange" />
            <!-- 筛选+列表 -->
            <div class="goods-list">
                <!-- 排序 -->
                <SubSort @sort-change="sortChange" />
                <!-- 列表 -->
                <ul>
                    <li v-for="item in goodsList" :key="item">
                        <GoodsItem :goods="item" />
                    </li>
                </ul>
                <XtxInfiniteLoading :loading="loading" :finished="finished" @infinite="getData" />
            </div>
        </div>
    </div>
</template>

<script>
import { ref, watch } from "vue";
import SubBread from "./components/sub-bread";
import SubFilter from "./components/sub-filter";
import SubSort from "./components/sub-sort";
import GoodsItem from "./components/goods-item";
import { findSubCategoryGoods } from '@/api/category';
import { useRoute } from 'vue-router';
export default {
    name: "SubCategory",
    components: {
        SubBread,
        SubFilter,
        SubSort,
        GoodsItem
    },
    setup() {
        // 加载中
        const loading = ref(false)
        // 是否请求完成
        const finished = ref(false)
        const route = useRoute()
        const goodsList = ref([])
        // 查询参数
        let reqParams = {
            page:1,
            pageSize:20
        }
        const getData = () => {
            loading.value = true
            reqParams.categoryId = route.params.id
            findSubCategoryGoods(reqParams).then(data => {
                if (data.result.items.length) {
                    goodsList.value.push(...data.result.items)
                    reqParams.page++
                }else{
                    finished.value = true
                }
                loading.value = false
            })
        }
        // 刷新时重新加载数据 监听
        watch(()=>route.params.id,(newVal)=>{
            if (newVal && `/category/sub/${newVal}` === route.path) {
                goodsList.value = []
                reqParams = {
                    page: 1,
                    pageSize: 20
                }
                finished.value = false
            }
        })
        // 更改筛选规则
        const sortChange = (sortParams) =>{
            finished.value = false
            //合并参数 保留之前的参数
            reqParams  = {...reqParams,...sortParams}
            reqParams.page = 1
            goodsList.value = [] 
            // getData()
        }
        // 销售属性参数过滤
        const filterChange = (filterParams) => {
            finished.value = false
            reqParams = {...reqParams,...filterParams}
            reqParams.page = 1
            goodsList.value = []
        }
        return {
            loading,
            finished,
            goodsList,
            getData,
            sortChange,
            filterChange
        }
    },
};
</script>

<style scoped lang='less'>
.goods-list {
    background: #fff;
    padding: 0 25px;
    margin-top: 25px;
    ul {
        display: flex;
        flex-wrap: wrap;
        padding: 0 5px;
        li {
            margin-right: 20px;
            margin-bottom: 20px;
            &:nth-child(5n) {
                margin-right: 0;
            }
        }
    }
}
</style>